<template>
  <div>
    <div v-if="state == 1">
      <slot />
    </div>
    <div class="open_state" :style="customStyle" v-else>
      <img :src="viewData.img" :class="{loading:state == 0}" />
      <p class="text">{{viewData.text}}</p>
      <t-button @click="load" v-if="state == 3" size="mini" type="primary">重新加载</t-button>
    </div>
  </div>
</template>
<script>
export default {
  inject: ["reload"],
  props: {
    /*
    页面状态 0 加载中 1 加载成功 2 无数据 3 请求失败
    */
    state: {
      type: [String, Number],
      default: 0,
    },
    customStyle:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    loadingText:{
      type:String,
      default:"加载中..."
    },
    loadingImg:{
      type:String,
      default:()=>{
        return require("@/assets/images/loading.png")
      }
    },
    noDataText:{
      type:String,
      default:"暂无数据"
    },
    noDataImg:{
      type:String,
      default:()=>{
        return require("@/assets/images/no_data.png")
      }
    },
    errorText:{
      type:String,
      default:"加载失败，请联系管理员！"
    },
    errorImg:{
      type:String,
      default:()=>{
        return require("@/assets/images/no_link.png")
      }
    }

  },
  computed: {
    viewData() {
      return this.config[this.state];
    },
  },
  data() {
    return {
      config: {
        0: {
          img: this.loadingImg,
          text:this.loadingText,
        },
        2: {
          img:this.noDataImg ,
          text: this.noDataText,
        },
        3: {
          img: this.errorImg,
          text:this.errorText,
        },
      },
    };
  },
  methods: {
    load() {
      this.reload();
      this.$emit("reload");
    },
  },
};
</script>
<style lang="scss" scoped>
.open_state {
  min-height: 500px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  user-select: none;
  img {
    width: 150px;
    height: auto;
  }
  .text {
    color: #c7cddd;
    margin: 0px 0px 20px 0px;
  }
  .loading {
    animation: jump 1000ms infinite;
  }
  @keyframes jump {
    from,
    10% {
      transform: translateY(0) scale3d(1, 1, 1);
    }

    30% {
      transform: translateY(10%) scale3d(1.05, 0.8, 1);
    }

    50% {
      transform: translateY(-50%) scale3d(1, 1.1, 1);
    }

    65% {
      transform: translateY(0) scale3d(1, 1, 1);
    }

    75% {
      transform: translateY(8%) scale3d(1.08, 0.84, 1);
    }

    85% {
      transform: translateY(6%) scale3d(1.05, 0.88, 1);
    }
    90%,
    to {
      transform: none;
    }
  }
}
</style>
